<template>
  <div class="hairsalon">
    <header-top>
      <a class="header_left" slot="left" @click="$router.back()">
        <img src="../../../assets/images/icon_fanhui.png"/>
      </a>
      <a class="header_center" slot="center">
        <span>发型师详情</span>
      </a>
    </header-top>
    <div class="hairsalon_content_list">
      <div class="hairsalon_content">
        <flexbox :gutter="0">
          <flexbox-item :span="3">
            <div class="discount_fuhao">
              <img src="../images/stylist.png"/>
            </div>
          </flexbox-item>
          <flexbox-item>
            <div class="discount_money">
              <span class="font_size_14">擅长：</span>
              <span class="font_size__14">数码烫 数码烫数码烫 数码烫数码烫数码烫数码烫</span>
            </div>
            <div>
              <x-button mini plain type="primary" class="margin-top_5">美发经验很丰富</x-button>
              <x-button mini plain type="primary" class="margin-top_5">技术很好</x-button>
            </div>
          </flexbox-item>
        </flexbox>
      </div>
      <p class="line"/>
      <div class="hairsalon_content">
        <flexbox :gutter="0">
          <flexbox-item>
            <div class="content_title">
              作品展示
            </div>
            <div>
              <img src="./images/Work_display.png" style="height: 120px;width:100%;"/>
            </div>
          </flexbox-item>
        </flexbox>
      </div>
      <p class="line"/>
      <div class="hairsalon_content">
        <flexbox :gutter="0">
          <flexbox-item>
            <div class="content_title">
              美发套餐
            </div>
            <div>
              <div class="content_item">
                <div class="content_item_jiage">
                  <span class="font_size_12">￥</span><span class="font_size_16">3522</span>
                </div>
                <div class="content_item_content">
                  <p>洗剪吹1次，男女不限，发长不限，烫染不限洗剪吹</p>
                </div>
                <div class="content_item_img" @click="$router.push('/reservation')">
                  <img src="../images/btn_yuyue.png"/>
                </div>
              </div>
              <div class="content_item margin-top_5">
                <div class="content_item_jiage">
                  <span class="font_size_12">￥</span><span class="font_size_16">3522</span>
                </div>
                <div class="content_item_content">
                  <p>洗剪吹1次，男女不限，发长不限，烫染不限洗剪吹</p>
                </div>
                <div class="content_item_img" @click="$router.push('/reservation')">
                  <img src="../images/btn_yuyue.png"/>
                </div>
              </div>
            </div>
          </flexbox-item>
        </flexbox>
      </div>
      <p class="line"/>
      <div class="hairsalon_content">
        <flexbox :gutter="0">
          <flexbox-item>
            <div class="content_title">
              用户评论
            </div>
            <div class="font_size_14">
              <div class="pinglun_item">
                <div>
                  <p class="pinglun_item_phone">132****1319</p>
                  <p class="pinglun_item_date">2015-03-25</p>
                </div>
                <div class="pinglun_item_content">
                  <p>
                    之前在天虹的过锅瘾吃过，感觉不怎么样，这次朋友推荐来这里吃，点的组合锅，用了2张券，价格有些偏贵之前在天虹的过锅瘾吃过，感觉不怎么样，这次朋友推荐来这里吃，点的组合锅，用了2张券，价格有些偏贵
                  </p>
                </div>
              </div>
            </div>
            <p class="line"/>
            <div class="font_size_14">
              <div class="pinglun_item">
                <div>
                  <p class="pinglun_item_phone">132****1319</p>
                  <p class="pinglun_item_date">2015-03-25</p>
                </div>
                <div class="pinglun_item_content">
                  <p>
                    之前在天虹的过锅瘾吃过，感觉不怎么样，这次朋友推荐来这里吃，点的组合锅，用了2张券，价格有些偏贵之前在天虹的过锅瘾吃过，感觉不怎么样，这次朋友推荐来这里吃，点的组合锅，用了2张券，价格有些偏贵
                  </p>
                </div>
              </div>
            </div>
          </flexbox-item>
        </flexbox>
      </div>
    </div>
  </div>
</template>

<script>
  import {Flexbox, FlexboxItem, XButton} from 'vux'
  import HeaderTop from '../../../components/HeaderTop/HeaderTop'

  export default {
    name: "HairstyListDetail",
    components: {
      Flexbox, FlexboxItem, XButton, HeaderTop
    },
    data() {
      return {}
    }
  }

</script>

<style scoped>
  .hairsalon_content_list {
    margin: 58px 15px 10px 15px;
    background-color: #fff;
    border: 1px solid #ffdccd;
  }

  .hairsalon_content {
    margin: 10px 15px;
  }

  .content_title {
    color: #a0a0a0;
    font-size: 14px;
    margin: 0 0 10px 0;
  }

  .discount_fuhao img {
    width: 64px;
    height: 64px;
  }

  .content_item {
    border: 1px solid #ccc;
    border-radius: 3px;
    height: 48px;
  }

  .content_item_jiage {
    float: left;
    position: relative;
    top: 15px;
    left: 15px;
    width: 10%;
  }

  .content_item_content {
    float: left;
    width: 60%;
    position: relative;
    left: 40px;
    top: 5px;
  }

  .content_item_img {
    float: right;
    position: relative;
    right: 10px;
    top: 5px;
    width: 10%;
  }

  .content_item_img img {
    width: 36px;
    height: 36px;
  }

  .font_size_12 {
    color: #ff0000;
    font-size: 12px;
  }

  .font_size_14 {
    color: #a0a0a0;
    font-size: 14px;
  }

  .font_size__14 {
    color: #333;
    font-size: 14px;
  }

  .font_size_16 {
    color: #ff0000;
    font-size: 16px;
  }

  .pinglun_item_phone {
    float: left;
    color: #333;
    margin: 10px 0;
  }

  .pinglun_item_date {
    float: right;
    margin: 10px 0;
  }

  .pinglun_item_content {
    clear: both;
    margin-bottom: 10px;
  }

  .margin-top_5{
    margin-top: 5px;
  }
</style>
